<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import { post, get } from '../utils/request.js'
import { ElMessage } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'
import { de } from 'element-plus/es/locales.mjs'

// 定义静态数据
const ageData = ref([
  { value: -1, label: '全部' },
  { value: 0, label: '少年' },
  { value: 1, label: '中年' },
  { value: 2, label: '老年' },
  { value: 3, label: '青年' },
])

const sexData = ref([
  { value: -1, label: '全部' },
  { value: 0, label: '男' },
  { value: 1, label: '女' },
])

const styleData = ref()
const paySuccessDia = ref(false)
const selectAge = ref(-1)
const selectSex = ref(-1) // 选择的性别
const selectStyle = ref(-1) // 选择的风格id
const templateList = ref([]) // 模板列表
const chooseSyleIds = ref([]) // 选择的模板id
const isFinally = ref(false) // 是否生成成功
// const isPay = ref(false) // 是否支付
const centerDialogVisible = ref(false) // 二维码弹框是否显示
const loading = ref(false) // 加载中
const qrcodeUrl = ref('') // 二维码地址
const isScanned = ref(false) // 是否已扫描
const resutPictureUrl = ref([]) // 生成的图片地址
const chooseResultPicture = ref([]) // 选择的图片
// const chooseResultPictureData = ref([])
const orderNo = ref('') // 订单号
const payCenterDialogVisible = ref(false) // 是否显示结果
const payQrcodeUrl = ref('') // 支付二维码地址
const dialogVisible = ref(false) // 支付超时弹框是否显示
const sytime = ref('-') //倒计时
const choosepicturetime = ref(0) // 选择图片倒计时
const selectRef = ref(null)
// 初始化数据 加载模板列表
const initData = async () => {
  loading.value = true
  const requestData = {
    age: selectAge.value,
    sex: selectSex.value,
    styleIds: selectStyle.value,
  }
  //如果选择的值是-1，给空
  if (selectAge.value === -1) {
    requestData.age = ''
  }
  if (selectSex.value === -1) {
    requestData.sex = ''
  }
  if (selectStyle.value === -1) {
    requestData.styleIds = ''
  }
  try {
    const res = await post('/api/picture-template/template-list', requestData)
    if (res.statusCode === 200) {
      loading.value = false
      const temp_data = res.data
      templateList.value = temp_data
    } else {
      loading.value = false
      ElMessage({
        type: 'error',
        duration: 0,
        message: '数据异常',
      })
    }
  } catch (error) {
    console.log(error)
  }
}

// 生成二维码
const createQrcode = async () => {
  if (chooseSyleIds.value.length <= 0) {
    ElMessage({
      type: 'error',
      message: '请选择你喜欢的模板',
    })
    return
  }
  loading.value = true
  const sceneStr = uuidv4()
  const requestData = {
    id: 0,
    sceneStr: sceneStr,
    templateIds: chooseSyleIds.value,
  }
  try {
    const res = await post('/api/we-chat/qr-code', requestData)
    if (res.statusCode === 200) {
      loading.value = false
      qrcodeUrl.value = res.data
      centerDialogVisible.value = true
      getQrcodeStatus(sceneStr) // 轮询请求二维码状态
    } else {
      loading.value = false
      ElMessage({
        type: 'error',
        message: res.errors,
      })
    }
  } catch (error) {
    loading.value = false
    console.log(error)
  }
}

//获取风格列表
const getStyleList = async () => {
  const requestData = {}
  try {
    const res = await post('/api/picture-style/list-for-web', requestData)
    if (res.statusCode === 200) {
      //添加一个全部选项
      styleData.value = [{ value: -1, label: '全部' }]
      styleData.value = styleData.value.concat(
        res.data.map((item: any) => {
          return {
            value: item.id,
            label: item.name,
          }
        }),
      )
      selectStyle.value = styleData.value[0].value
    } else {
      ElMessage({
        type: 'error',
        message: '数据异常',
      })
    }
  } catch (error) {
    console.log(error)
  }
}

//轮询请求二维码状态
const getQrcodeStatus = async (scene_str: string) => {
  const timeId = setInterval(async () => {
    try {
      const res = await get('/api/we-chat/user-by-scene/' + scene_str)
      if (res.statusCode == 200) {
        if (res.data != null) {
          //用户已扫描二维码
          clearInterval(timeId)
          isScanned.value = true
          const lastOrderNo = res.data.lastOrderNo
          if (getPictureStatus) {
            getPictureStatus(lastOrderNo)
          }
        } else {
          console.log('二维码未失效，继续轮询')
        }
      }
    } catch (error) {
      console.log(error)
    }
  }, 1000)
}

//更新订单状态
const updateOrderStatus = async (lastOrderNo: string) => {
  try {
    const res = await get('/api/order/timeout/' + lastOrderNo)
    if (res.statusCode === 200) {
    } else {
    }
  } catch (error) {
    console.log(error)
  }
}

//轮询请求h5上传状态
const getPictureStatus = async (lastOrderNo: string) => {
  let time_num = 0
  const timeId = setInterval(async () => {
    try {
      const res = await get('/api/order/order-by-no/' + lastOrderNo)
      time_num++
      sytime.value = 200 - time_num
      if (res.statusCode == 200) {
        console.log(time_num)
        if (time_num >= 200) {
          time_num = 0
          clearInterval(timeId)
          //调接口更新订单状态
          updateOrderStatus(lastOrderNo)
          ElMessage({
            type: 'error',
            message: '已超时,请重新操作',
          })
          setTimeout(() => {
            window.location.reload()
          }, 1000)
        } else {
          if (res.data) {
            if (res.data.state == 1) {
              //已上传成功
              clearInterval(timeId)
              isFinally.value = true
              centerDialogVisible.value = false
              resutPictureUrl.value = res.data.userPictures
              orderNo.value = res.data.orderNO
              console.log(res.data)

              // 选择图片倒计时
              choosepicturetime.value = 136
              const timePicureId = setInterval(() => {
                choosepicturetime.value--
                if (choosepicturetime.value <= 0) {
                  clearInterval(timePicureId)
                  updateOrderStatus(lastOrderNo)
                  backHome()
                }
              }, 1000)
            }
          }
        }
      }
    } catch (error) {
      console.log(error)
    }
  }, 1000)
}

//轮询支付状态
const getPayStatus = async (lastOrderNo: string) => {
  let time_num = 0
  const timeId = setInterval(async () => {
    try {
      const res = await get('/api/order/paid-order-by-no/' + lastOrderNo)
      time_num++
      if (res.statusCode == 200) {
        console.log(time_num)
        if (time_num >= 60) {
          clearInterval(timeId)
          dialogVisible.value = true
          payCenterDialogVisible.value = false
        } else {
          if (res.data) {
            if (res.data.state == 2) {
              //已上传成功
              clearInterval(timeId)
              payCenterDialogVisible.value = false
              paySuccessDia.value = true
              // setTimeout(() => {
              //   window.location.reload()
              // }, 5000)
              // window.location.reload()
              // isPay.value = true
              // ElMessage({
              //   type: 'success',
              //   message: '支付成功,请在公众号查看下载照片',
              //   duration: 0,
              //   showClose: true,
              // })
              // console.log(res.data)
            }
          }
        }
      }
    } catch (error) {
      console.log(error)
    }
  }, 1000)
}

// 选择模板
const chooseTemple = (item) => {
  if (chooseSyleIds.value.includes(item.id)) {
    chooseSyleIds.value = chooseSyleIds.value.filter((id) => id !== item.id)
    return
  } else {
    chooseSyleIds.value.push(item.id)
  }
}

//选择上传图片
const choosePicture = (item) => {
  if (chooseResultPicture.value.includes(item.id)) {
    chooseResultPicture.value = chooseResultPicture.value.filter((id) => id !== item.id)
    return
  } else {
    chooseResultPicture.value.push(item.id)
  }
}

//支付订单
const payOrder = async () => {
  if (chooseResultPicture.value.length <= 0) {
    ElMessage({
      type: 'error',
      message: '请选择照片',
    })
    return
  }
  const requestData = { orderNO: orderNo.value, pictureIds: chooseResultPicture.value }
  try {
    const res = await post('/api/order/order-pay', requestData)
    if (res.statusCode === 200) {
      payQrcodeUrl.value = res.data
      payCenterDialogVisible.value = true
      getPayStatus(orderNo.value) // 轮询请求二维码状态
    } else {
      ElMessage({
        type: 'error',
        message: res.errors,
      })
    }
  } catch (error) {
    console.log(error)
  }
}

// 关闭支付二维码弹框
const closePayQrcode = () => {
  payCenterDialogVisible.value = false
}

// 监听年龄和性别变化，合并 watch 逻辑
watch(
  [selectAge, selectSex, selectStyle],
  ([newAge, newSex, newStyle], [oldAge, oldSex, oldStyle]) => {
    if (newAge !== oldAge || newSex !== oldSex || newStyle !== oldStyle) {
      chooseSyleIds.value = []
      //如果没有选择，就默认选择了全部
      if (newAge === undefined || newAge === null || newAge === '') {
        selectAge.value = -1
      }
      if (newSex === undefined || newSex === null || newSex === '') {
        selectSex.value = -1
      }
      if (newStyle === undefined || newStyle === null || newStyle === '') {
        selectStyle.value = -1
      }
      initData()
    }
  },
)

// 计算总价
const jisuantotal = () => {
  // 计算选中照片的总价
  const totalPrice = chooseResultPicture.value
    .reduce((sum, id) => {
      // 从结果图片列表中查找对应图片
      const picture = resutPictureUrl.value.find((item) => item.id === id)
      // 累加图片价格，若未找到则加 0
      return sum + (picture?.price || 0)
    }, 0)
    .toFixed(2)
  return totalPrice
}

//支付超时
const resetPay = () => {
  window.location.reload()
}

onMounted(() => {
  getStyleList()
  initData()
})

// 关闭二维码弹框
const closeQrcode = () => {
  centerDialogVisible.value = false
  // isFinally.value = true
}

// 返回首页
const backHome = () => {
  // isFinally.value = false
  window.location.reload()
}

const paySuccessBack = () => {
  window.location.reload()
}

const handleClose = () => {
  dialogVisible.value = false
}

// 打开二维码弹框
const openQrcode = () => {
  createQrcode() // 生成二维码
}

const changeAge = () => {
  const ageSelect = document.getElementById('ageSelect')
  selectAge.value = ageSelect.options[ageSelect.selectedIndex].value
}
const changeSex = () => {
  const sexSelect = document.getElementById('sexSelect')
  selectSex.value = sexSelect.options[sexSelect.selectedIndex].value
}
const changeStyle = () => {
  const styleSelect = document.getElementById('styleSelect')
  selectStyle.value = styleSelect.options[styleSelect.selectedIndex].value
}
</script>

<template>
  <div class="container" v-loading="loading" element-loading-background="rgba(23, 25, 49, 0.8)">
    <div class="container_nav" v-if="!isFinally">
      <div class="container_nav_item">
        <!-- <select class="custome-select" @change="changeAge" id="ageSelect">
          <option v-for="item in ageData" :key="item.value" :label="item.label" :value="item.value">
            {{ item.label }}
          </option>
        </select> -->
        <el-select
          v-model="selectAge"
          ref="selectRef"
          placeholder=""
          :popper-append-to-body="false"
          popper-class="custom-popper"
          placement="bottom-start"
          clearable
        >
          <el-option
            v-for="item in ageData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="container_nav_item">
        <!-- <select class="custome-select" @change="changeSex" id="sexSelect">
          <option v-for="item in sexData" :key="item.value" :label="item.label" :value="item.value">
            {{ item.label }}
          </option>
        </select> -->
        <el-select
          v-model="selectSex"
          popper-class="custom-popper"
          :popper-append-to-body="false"
          placeholder=""
          clearable
        >
          <el-option
            v-for="item in sexData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="container_nav_item">
        <!-- <select class="custome-select" @change="changeStyle" id="styleSelect">
          <option
            v-for="item in styleData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            {{ item.label }}
          </option>
        </select> -->

        <el-select
          v-model="selectStyle"
          popper-class="custom-popper"
          :popper-append-to-body="false"
          placeholder=""
          clearable
        >
          <el-option
            v-for="item in styleData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="template_num" v-if="!isFinally">
      <text style="color: #409eff">已选{{ chooseSyleIds.length }}个模板</text> 共{{
        templateList.length
      }}模板
    </div>
    <div class="photos_list" v-if="!isFinally">
      <div class="photos_list_item" v-for="item in templateList" :key="item">
        <div
          class="photos_list_item_img"
          @click="chooseTemple(item)"
          :class="{ photo_selected: chooseSyleIds.includes(item.id) }"
        >
          <img class="photos_bg" src="../assets/img/mbbj.png" alt="" />
          <img class="photos_img" :src="item && item.imagePath ? item.imagePath : ''" alt="" />
        </div>
      </div>
    </div>

    <div class="container_nav" v-if="isFinally" style="padding-top: 43rem"></div>
    <div class="template_num" style="text-align: center" v-if="isFinally">
      请点击选择您需要的照片
    </div>
    <div class="photos_list photos_list_result" v-if="isFinally">
      <div class="photos_list_item" v-for="item in resutPictureUrl" :key="item">
        <div
          class="photos_list_item_img"
          :class="{ photo_selected: chooseResultPicture.includes(item.id) }"
          @click="choosePicture(item)"
        >
          <img class="photos_img" :src="item.picturePath" alt="" />
        </div>
      </div>
    </div>
    <div
      v-if="isFinally"
      class="template_num"
      style="
        display: flex;
        justify-content: center;
        margin-top: 0;
        font-size: 3.5rem;
        padding-top: 4rem;
      "
    >
      <!-- <div>每张照片{{ resutPictureUrl[0].price }}元</div> -->
      <div style="margin: 0 2rem">已选择{{ chooseResultPicture.length }}张照片</div>
      <div>合计金额{{ jisuantotal() }}元</div>
    </div>

    <div class="footer_box">
      <div
        class="pay_btn_title"
        @click="payOrder"
        style="margin-bottom: 0"
        v-if="isFinally && chooseResultPicture.length > 0"
      >
        微信扫码支付
      </div>
      <div class="footer_box_box">
        <div class="footer_box_btn" v-if="!isFinally">
          <div class="footer_box_btn_box">
            <div class="btn_title" @click="openQrcode">
              <img class="btn_xj" src="../assets/img/xj.png" alt="" />
              <img class="footer_btn_bg" src="../assets/img/bt_bg.png" alt="" />
              开始制作
            </div>
            <!-- <div class="btn_title" @click="backHome" v-if="isFinally">放弃并退出</div>
            <img class="footer_btn_bg" src="../assets/img/bt_bg.png" alt="" /> -->
          </div>
        </div>

        <div style="text-align: center; width: 100%">
          <div
            class="template_num"
            v-if="isFinally"
            @click="backHome"
            style="
              margin-top: 4rem;
              box-shadow: 0 0.5rem 1.43rem #03fff8;
              border-radius: 6.25rem;
              border: 0.375rem solid #b6fffd;
              width: 35rem;
              height: 9rem;
              display: flex;
              justify-content: center;
              align-items: center;
              background-color: transparent;
            "
          >
            放弃并退出
          </div>

          <div class="template_num" style="text-align: center; margin-top: 4rem" v-if="isFinally">
            {{ choosepicturetime }}秒后自动退出
          </div>
        </div>

        <div class="customer">
          <img
            class="customer_btn_xj"
            src="../assets/img/kf.png"
            alt=""
            style="object-fit: cover"
          />
          <view class="customer_content"
            ><text style="margin-right: 1rem; margin-left: 1rem">客服</text>
            <text>15829585571</text>
          </view>
        </div>
      </div>
    </div>

    <!-- 二维码弹框 -->
    <el-dialog
      v-model="centerDialogVisible"
      title=""
      width="500"
      align-center
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="qrcode_box">
        <div v-if="!isScanned">
          <div class="qrcode_box_item_title">关注公众号</div>
          <div class="qrcode_box_img">
            <img class="qrcode_box_img_img" :src="qrcodeUrl" alt="" />
            <img class="qrcode_box_img_bg" src="../assets/img/bj.png" alt="" />
          </div>
          <div class="qrcode_box_tips">上传您的照片，为您生成旅游照片</div>
          <img
            class="qrcode_box_img_close"
            src="../assets/img/close.png"
            @click="closeQrcode"
            alt=""
          />
        </div>

        <div style="padding: 0 10rem" v-else>
          <div class="qrcode_box_item_title">扫码成功</div>
          <div class="qrcode_box_tips" style="margin-top: 10rem">
            请在公众号中上传您的照片，为您生成旅游照片。
          </div>
          <div
            class="qrcode_box_tips"
            style="
              position: absolute;
              bottom: 10rem;
              width: 64.25rem !important;
              text-align: center;
            "
          >
            剩余时间:<view style="font-size: 5rem">{{ sytime }}</view
            >秒
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 支付二维码弹框 -->
    <el-dialog
      v-model="payCenterDialogVisible"
      title=""
      width="500"
      align-center
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="qrcode_box">
        <div>
          <div class="qrcode_box_item_title">微信扫码支付</div>
          <div class="qrcode_box_img">
            <img class="qrcode_box_img_img" :src="payQrcodeUrl" alt="" />
            <img class="qrcode_box_img_bg" src="../assets/img/bj.png" alt="" />
          </div>
          <div class="qrcode_box_tips">支付成功后，请在公众号查看下载照片。</div>
          <img
            class="qrcode_box_img_close"
            src="../assets/img/close.png"
            @click="closePayQrcode"
            alt=""
          />
        </div>
      </div>
    </el-dialog>

    <el-dialog
      v-model="dialogVisible"
      :show-close="false"
      :modal="false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      style="height: 36rem; top: 20vh; position: relative"
    >
      <div
        style="
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          padding-top: 5rem;
        "
      >
        <span style="font-size: 5rem; color: #fff">支付超时，请重新操作</span>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="resetPay"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="paySuccessDia"
      title=""
      width="500"
      align-center
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="qrcode_box">
        <div>
          <div class="qrcode_box_item_title">支付结果</div>
          <div
            class="qrcode_box_img"
            style="margin-bottom: 2rem !important; margin-top: 20rem !important"
          >
            <img
              class="qrcode_box_img_img"
              style="background: none !important; width: 15rem; height: 15rem"
              src="../assets/img/ps.png"
              alt=""
            />
          </div>
          <div class="qrcode_box_tips" style="font-size: 4.5rem">支付成功</div>
          <div class="qrcode_box_tips" style="font-size: 4.5rem; margin-top: 1rem">
            请到公众号中查看照片
          </div>
          <img
            class="qrcode_box_img_close"
            src="../assets/img/close.png"
            @click="paySuccessBack"
            alt=""
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<style scoped>
.custome-select {
  width: 35rem;
  height: 11.25rem;
  box-shadow: 0 0.5rem 1.43rem 0 #03fff8;
  border-radius: 6.25rem 6.25rem 6.25rem 6.25rem;
  border: 0.375rem solid #b6fffd;
  background-color: transparent;
  padding: 0 2rem;
  color: #fff;
  font-size: 4rem;

  /*鼠标上移变成小手*/
  appearance: none;
  /*去掉默认的下拉三角*/
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url('../assets/img/down.png') no-repeat right center transparent; /* 下拉箭头图片 */
  background-size: 4rem 3.9rem; /* 下拉箭头大小 */
  padding-right: 10px;
  option {
    color: #606266;
    border: none !important;
    height: 6rem;
    line-height: 6rem;
    font-size: 2.5rem;
    background-color: #fff;
    border-radius: 10px;
  }
}

::v-deep .el-dialog__footer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .el-button {
    /* width: 20rem; */
    padding: 3rem 5rem;
    border-radius: 3rem;
    height: 6rem;
    font-size: 4rem;
  }
}
.dialog-footer {
  position: absolute;
  bottom: 5rem;
}
:deep(.el-checkbox__inner::after) {
  border: 3px solid #fff;
  border-left: 0;
  border-top: 0;
  left: 6px;
  top: 2px;
  height: 10px;
  width: 5px;
}

.photo_selected::after {
  content: '✓';
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  width: 8rem;
  height: 8rem;
  /* background-color: rgba(0, 0, 0, 0.5); */
  background-color: rgb(64, 158, 255, 1);
  color: #fff;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 5rem;
  z-index: 1000;
}

::v-deep .el-loading-mask .el-loading-spinner {
  transform: scale(4);
}

.large-screen-message {
  background-color: red;
}

.custom-popper .el-select-dropdown__item {
  height: 6rem;
  line-height: 6rem;
  font-size: 2.5rem;
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 400;
  transition: all 0.3s ease;
  /* background-color: #171A32; */
  /* color: #ffffff; */
}

.custom-popper .el-select-dropdown__item:last-child {
  border-bottom: none;
}

.custom-popper .el-select-dropdown__item:hover {
  background: rgba(144, 202, 249, 0.3);
  color: #0d47a1;
  transform: translateX(5px);
}

.custom-popper .el-select-dropdown__item.selected {
  background: #bbdefb;
  color: #0d47a1;
  font-weight: 600;
}

.qrcode_box {
  .qrcode_box_img_close {
    position: absolute;
    width: 8.3125rem;
    height: 8.3125rem;
    bottom: -10.1875rem;
    left: 45%;
  }

  .qrcode_box_tips {
    font-family:
      Source Han Sans CN,
      Source Han Sans CN;
    font-weight: 400;
    font-size: 4rem;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
    text-align: center;
  }

  .qrcode_box_img {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 10.375rem;
    margin-bottom: 12.9375rem;
    position: relative;
  }

  .qrcode_box_img_bg {
    position: absolute;
    width: 48.25rem;
    height: 48.25rem;
  }

  .qrcode_box_img .qrcode_box_img_img {
    width: 35.6875rem;
    height: 35.6875rem;
    background: #ffffff;
    border-radius: 2.375rem 2.375rem 2.375rem 2.375rem;
  }

  .qrcode_box_item_title {
    font-family:
      Source Han Sans CN,
      Source Han Sans CN;
    font-weight: 400;
    font-size: 5rem;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
    margin-top: 11rem;
  }
}

body::-webkit-scrollbar {
  width: 0 !important;
  /* WebKit */
}

.footer_box {
  width: 116rem;
  /* position: fixed; */
  /* bottom: 10rem; */
  /* left: 10rem; */
  margin: 0 auto;
  margin-top: 5.5rem;

  .footer_box_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .footer_box_btn {
    width: 116rem;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .customer_btn_xj {
    width: 2rem;
    height: 3rem;
    border-radius: 0rem 0rem 0rem 0rem;
  }

  .customer {
    margin-top: 3.5rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .customer_content {
    font-family:
      Source Han Sans CN,
      Source Han Sans CN;
    font-weight: 400;
    font-size: 3rem;
    color: #ffffff;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .btn_xj {
    width: 4.18rem;
    height: 4.18rem;
  }

  .footer_box_btn_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    z-index: 999;
    width: 74.75rem;
    height: 15.75rem;
  }

  .footer_btn_bg {
    position: absolute;
    width: 75rem;
    height: 17.5rem;
    top: -0.8rem;
    left: 0rem;
    z-index: -1;
  }

  .pay_btn_title {
    margin: 0 auto;
    margin-bottom: 4rem;
    width: 74.75rem;
    height: 15.75rem;
    background: linear-gradient(90deg, #ff12d2 0%, #6912ff 100%);
    box-shadow: 0rem 0rem 2.5rem 0.375rem rgba(255, 18, 210, 0.24);
    border-radius: 10rem 10rem 10rem 10rem;
    font-family:
      Source Han Sans CN,
      Source Han Sans CN;
    font-weight: 400;
    font-size: 6rem;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
    line-height: 15.75rem;
    text-align: center;
  }
  .btn_title {
    position: relative;
    z-index: 999;
    width: 74.75rem;
    height: 15.75rem;
    background: linear-gradient(90deg, #ff12d2 0%, #6912ff 100%);
    box-shadow: 0rem 0rem 2.5rem 0.375rem rgba(255, 18, 210, 0.24);
    border-radius: 10rem 10rem 10rem 10rem;
    font-family:
      Source Han Sans CN,
      Source Han Sans CN;
    font-weight: 400;
    font-size: 6rem;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    text-transform: none;
    line-height: 15.75rem;
    text-align: center;
  }
}

.photos_list_result {
  width: 116rem;
  height: 45% !important;
  margin: 0 auto;
  margin-top: 3rem !important;
  .photos_list_item_img {
    width: 45.625rem !important;
    height: 52.5rem !important;
    background: #ffffff !important;
    box-shadow: 0rem 0.5rem 1.4375rem 0rem #fff9d7 !important;
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem !important;
    border: 0.375rem solid #fff9d7 !important;
    margin-left: 8.5rem !important;
  }

  .photos_img {
    width: 45.625rem !important;
    height: 52.5rem !important;
  }
}

.photos_list {
  width: 116rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  /* align-items: center; */
  flex-wrap: wrap;
  height: 40%;
  overflow-y: scroll;
  scrollbar-width: none;
  -ms-overflow-style: none;

  .photos_list_item_img {
    position: relative;
    margin-left: 3.5rem;
    margin-top: 4.625rem;

    width: 34rem;
    height: 28.5rem;
  }

  .photos_bg {
    position: absolute;
    width: 39rem;
    height: 33rem;
    left: -2.2rem;
    top: -1.6rem;
    z-index: 9;
  }

  .photos_list_item_img .photos_img {
    width: 34rem;
    height: 28.5rem;
    position: relative;
    background: #ffffff;
    box-shadow: 0px 0.5rem 1.43rem 0px #fff9d7;
    border-radius: 2.5rem 2.5rem 2.5rem 2.5rem;
    border: 0.375rem solid #fff9d7;
    margin-bottom: 6rem;
    z-index: 999;
  }
}

.template_num {
  font-family:
    Source Han Sans CN,
    Source Han Sans CN;
  font-weight: 400;
  font-size: 3.5rem;
  color: #ffffff;
  text-align: right;
  font-style: normal;
  text-transform: none;
  width: 85%;
  margin: 0 auto;
  margin-top: 8rem;
  text-align: right;
}

.container_nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 85%;

  margin: 0 auto;
  padding-top: 61rem;

  /* .custom-popper .el-select-dropdown__item {
    background-color: red;
  } */
  ::v-deep .el-select .el-select__wrapper {
    width: 35rem;
    height: 11.25rem;
    box-shadow: 0px 0.5rem 1.43rem 0px #03fff8;
    border-radius: 6.25rem 6.25rem 6.25rem 6.25rem;
    border: 0.375rem solid #b6fffd;
    background-color: transparent;
    padding: 0 2rem;
  }

  ::v-deep .el-icon svg {
    width: 4rem;
    height: 4rem;
    color: #ffffff;
  }

  ::v-deep .el-icon {
    width: 4rem;
    height: 4rem;
    color: #ffffff;
  }

  ::v-deep .el-select .el-select__selected-item {
    font-family:
      Source Han Sans CN,
      Source Han Sans CN;
    font-weight: 400;
    font-size: 4rem;
    color: #ffffff;
    text-align: left;
    height: 6rem;
    font-style: normal;
    line-height: 6rem;
  }
}

.container {
  width: 135rem;
  background-image: url('../assets/img/at.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* 使用 min-height 替代 height，确保容器高度至少为视口高度 */
  height: 240rem;
  /* 防止内边距和边框影响容器大小 */
  /* box-sizing: border-box; */
}

::v-deep .el-dialog {
  width: 85.25rem !important;
  height: 105.375rem;
  background-image: url('../assets/img/tc.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border-radius: 6rem 6rem 6rem 6rem;
}
</style>
